iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 6

語意標籤-30天學會HTML+CSS,製作精美網站

  • 分享至 

  • xImage
  •  

在HTML5中新增了語意標籤,取代以前只能用<div>劃分區塊,可以更清楚知道網頁區塊設計目的,也有有利SEO的搜尋。下圖是網站標籤的結構,依序跟大家說明每個標籤的意義
https://ithelp.ithome.com.tw/upload/images/20210921/201120531lmsb2etmf.png

<header>網頁頁首

通常會放置logo、選單、搜尋框、註冊按鈕等元素。下面用三個網站不同排版的範例:
https://ithelp.ithome.com.tw/upload/images/20210921/20112053juVUuIGcVh.png

圖片來源(https://syoss-selfcoloring.jp/ )

https://ithelp.ithome.com.tw/upload/images/20210921/201120533VA6hSUngY.png

圖片來源(https://fabric-tokyo.com/ )

https://ithelp.ithome.com.tw/upload/images/20210921/20112053jk7d1bwP2G.png

圖片來源(https://www.lacoste.jp/ )

<nav>導覽列選單

用來連結到網站其他的頁面。通常會放在標籤內,或是獨立一區塊。以下兩個範例都是選單獨立成一塊
https://ithelp.ithome.com.tw/upload/images/20210921/201120536ZnDPR6xw0.png

圖片來源(https://www.kyoto-tower.jp/)

https://ithelp.ithome.com.tw/upload/images/20210921/20112053QGIA1yOGd5.png

圖片來源(https://otent-nankai.jp/)

<main>網頁主要的內容

這頁面的主要資訊內容,也就是除了<header><nav><aside><footer>區塊以外的內容,且一個網頁只能有一個<main>標籤

<aside>非主要的內容

與主要內容無關的額外資訊,像是側邊欄、廣告、推薦文章....。範例旁邊是與內容無關的資訊
https://ithelp.ithome.com.tw/upload/images/20210921/20112053FH3qkYvVct.png

圖片來源(https://digitalist-web.jp/article/business/rKzdJ)

<article>文章

獨立的區塊包含一篇完整的內容,通常會有一個標題,像是新聞、部落格網站的文章

<section>群組或區塊

製作一個區塊的內容,用於章節段落的區分,會有標題及內容。
https://ithelp.ithome.com.tw/upload/images/20210921/201120531HNO3zCg6t.png

圖片來源(https://digitalist-web.jp/)

<article>不同的是,<section>不一定是獨立內容,但一定會有標題。

<footer>網頁頁尾

通常會放置版權聲明、相關連結、聯絡方式。以下三是三個不同footer排版的範例
https://ithelp.ithome.com.tw/upload/images/20210921/201120536I14FseUNx.png

圖片來源(https://digitalist-web.jp/)

https://ithelp.ithome.com.tw/upload/images/20210921/20112053m2c5xMzoEF.png

圖片來源(https://pu-ca.jp/)

https://ithelp.ithome.com.tw/upload/images/20210921/20112053TqGMFJj6Rw.png

圖片來源(https://www.mag2.co.jp/)

<div>無特定意義的區塊

沒有任何意義的區塊,當想要組成群組,但不知道要放哪個區塊

介紹完每個標籤的意義後,以下用https://www.teinei.co.jp/ 網站來做整個網站的區塊切割範例說明
https://ithelp.ithome.com.tw/upload/images/20210921/20112053acaAqbsOrG.jpg


上一篇
認識網頁元素 HTML、CSS
下一篇
網頁選擇器-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言